<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/vue.js"></script>
    <title>vue渲染函数2</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue Render Function Example</title>
        <style>
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            color: blue; /* 假设我们想要所有标题都是蓝色的 */
          }
        </style>
      </head>
      <body>
        <div id="app">
          <h1><span>111</span></h1>
          <anchored-heading :level="1">Hello world!</anchored-heading>
          <hello />
        </div>

        <script>
          // createElement(
          //   'anchored-heading', {
          //     props: {
          //       level: 1
          //     }
          //   }, [
          //     createElement('span', 'Hello'),
          //     ' world!'
          //   ]
          // )

          Vue.component("anchored-heading", {
            render: function (createElement) {
              return createElement(
                "h" + this.level,
                {
                  style: {
                    //color: "red",
                    fontSize: "14px",
                  },
                },
                [
                  this.$slots.default,
                  createElement("span", "Hello"),
                  //'hello'
                ]
              );
            },
            props: {
              level: {
                type: Number,
                required: true,
              },
            },
          });
          //   Vue.component("hello", {
          //     render: function (createElement) {
          //       return createElement("div", {
          //         domProps: {
          //           innerHTML: "hello !",
          //         },
          //       });
          //     },
          //   });

          //   Vue.component("anchored-heading", {
          //     render: function (createElement) {
          //       return createElement(
          //         "h" + this.level, // 标签名称
          //         this.$slots.default // 子节点数组
          //       );
          //     },
          //     props: {
          //       level: {
          //         type: Number,
          //         required: true,
          //       },
          //     },
          // });

          new Vue({
            el: "#app",
          });
        </script>
      </body>
    </html>
  </body>
</html>
